<template>
  <div class="main">
    <el-container class="home-container">
      <el-header>
        <div class="header-leftbox">
          <img :src="avaterImg" alt="" />
          <span>个人中心</span>
        </div>
        <div class="header-right">
          <el-button type="info" @click="logout">返回首页</el-button>
        </div>
      </el-header>
      <!-- 主题区域 -->
      <el-container>
        <!-- 侧面布局 -->
        <el-aside :width="isCollapse ? '64px' : '220px'">
          <div
            class="toggle-button"
            @click="isCollapse ? toggleCollapse() : toggleCollapse2()"
          >
            <i :class="buttonTextClassR"></i>
            <i :class="buttonTextClassR"></i>
            <i :class="buttonTextClassR"></i>
          </div>
          <!-- 侧边栏菜单去 -->
          <el-menu
            background-color="#f6fbf6"
            text-color="#244d4d"
            active-text-color="#409eff"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            default-active="/users"
          >
            <!-- 一级菜单 -->
            <el-menu-item
              :index="item.src"
              v-for="item in menuList"
              :key="item.id"
            >
              <!-- 一级菜单模板区域 -->
              <i :class="item.iconClass"></i>
              <template v-slot:title>
                <span>{{ item.menuName }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <footer-view></footer-view>
  </div>
</template>

<script>
import avaterImg from "../../assets/image/avaterDemo.jpg";
export default {
  data() {
    return {
      avaterImg: avaterImg,
      menuList: [
        {
          id: 0,
          menuName: "基本信息",
          iconClass: "fas fa-user",
          src: "/personalInfo",
        },
        {
          id: 1,
          menuName: "账户安全",
          iconClass: "fas fa-bars",
          src: "/accountSetting",
        },
        {
          id: 2,
          menuName: "我的地址",
          iconClass: "fas fa-address-card",
          src: "/message",
        },
      ],
      buttonTextClassR: "fas fa-angle-right",
      // 是否折叠
      isCollapse: true,
      // 被激活的链接地址
      activePath: "",
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  mounted() {
    this.init();
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/home");
    },
    toggleCollapse() {
      // 折叠侧边栏功能
      this.isCollapse = !this.isCollapse;
      this.buttonTextClassR = "fas fa-angle-left";
    },
    toggleCollapse2() {
      this.isCollapse = !this.isCollapse;
      this.buttonTextClassR = "fas fa-angle-right";
    },
    // 保存链接的激活
    saveActivePath(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    init() {
      let userInfo = this.$store.getters.getUserInfo;
      console.log(userInfo);
      if (userInfo.avatar) {
        this.avaterImg = userInfo.avatar;
      }
    },
  },
};
</script>

<style lang="scss">
.home-container {
  height: 100%;
  .el-header {
    background-color: #f6fbf6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    .header-leftbox {
      display: flex;
      align-items: center;
      img {
        height: 30px;
        width: 30px;
        margin: 0 20px;
        border-radius: 50%;
        border: 1px solid #244d4d;
        box-shadow: 1px 1px #ededf1;
      }
      span {
        color: #244d4d;
        font-size: 30px;
        font-weight: bold;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      .el-button {
        font-weight: bold;
        background-color: #244d4d;
      }
    }
  }
  .el-container {
    .el-aside {
      background-color: #f6fbf6;
      .toggle-button {
        background-color: #f6fbf6;
        border: 1px solid #244d4d;
        margin: 5px 5px;
        font-size: 10px;
        line-height: 30px;
        height: 30px;
        color: #244d4d;
        text-align: center;
        letter-spacing: 0.2rem;
        &:hover {
          background-color: #244d4d;
          color: #fff;
        }
      }
      .el-menu {
        border-right: none;
        .el-menu-item {
          border: 1px solid #244d4d;
          margin: 10px 5px;
          font-size: 15px;
          font-weight: bold;
          span {
            margin: 0 10px;
          }
          &:hover {
            background-color: #244d4d;
            color: #fff;
          }
        }
      }
    }
    .el-main {
      background-color: #f5f5f5;
    }
  }
}
</style>
